import React, { FC } from 'react';
import classNames from 'classnames'

export type BtnType = 'default' | 'primary' | 'danger' | 'link';
export type BtnSize = 'lg' | 'sm';

interface ButtonProps {
  type?: BtnType;
  size?: BtnSize;
  className?: string;
  onClick?: () => void;
  href?: string;
  disabled?: boolean;
  children?: React.ReactNode; // react 的节点
}

const Button:FC<ButtonProps> = (props) => {
  const { type, size, className, href, children,...rest} = props;

  // btn-danger
  const classes = classNames('btn', {
    [`btn-${type}`]: type,
    [`btn-${size}`]: size,
  });
  if(type === 'link') {
    return <a href={href} className={classes}>{children}</a>
  } else {
    return <div className={classes} {...rest}>{children}</div>
  }
}

export default Button;

// import React, { FC, ReactNode, Fragment  } from 'react'
// import styled from 'styled-components'
// export type BtnType = 'danger' | 'primary';

// export interface ButtonProps {
//   type?: BtnType,
//   children?: ReactNode,
//   className?: string
// }

// // React.Fragment  <></>
// // ui
// const BaseButton:FC<ButtonProps> = (props) => {
//   return <div className={props.className}>{props.children}</div>
// }

// // style
// const Button = styled(BaseButton)`
//   width: 100px;
//   height: 100px;
//   background: ${ props => props.type === 'danger' ? 'red': 'blue'};
// `;

// export default Button;
